<script setup lang="ts">
import { ref } from "vue";
import type {  CommentInfo, Tag } from "@/types/detailTypes/detailTypes.ts";

interface Props {
   evaluateInfo?: CommentInfo;
}

interface Emits {
   (e: "update:tag", tag: string | null): void;
   (e: "update:hasPicture", flag: boolean): void;
}

const props = defineProps<Props>();
const emits = defineEmits<Emits>();

const currentCtive = ref<number>(0);

const changeActive = (tag: Tag, index: number) => {
   currentCtive.value = index;
   if (tag.title === "全部评价") {
      emits("update:tag", null);
      emits("update:hasPicture", false);
   } else if (tag.title === "有图") {
      emits("update:tag", null);
      emits("update:hasPicture", true);
   } else {
      emits("update:tag", tag.title);
      emits("update:hasPicture", false);
   }
};

</script>

<template>
   <div class="head">
      <div class="data"><p><span>{{ evaluateInfo!.salesCount }}</span><span>人购买</span></p>
         <p><span>{{ evaluateInfo!.praisePercent }}</span><span>好评率</span></p></div>
      <div class="tags">
         <div class="dt">大家都在说:</div>
         <div class="dd">
            <a :class="{active:index===currentCtive}" v-for="(tag,index) in evaluateInfo?.tags" :key="tag.title" @click="changeActive(tag,index)">{{ tag.title }}({{ tag.tagCount }})</a>
         </div>
      </div>
   </div>
</template>

<style scoped lang="less">
.head {
   display: flex;
   padding: 30px 0;

   .data {
      width: 340px;
      display: flex;
      padding: 20px;

      p {
         flex: 1;
         text-align: center;

         span {
            display: block;

            &:first-child {
               font-size: 32px;
               color: @priceColor;
            }

            &:last-child {
               color: #999;
            }
         }
      }
   }

   .tags {
      flex: 1;
      display: flex;
      border-left: 1px solid #f5f5f5;

      .dt {
         font-weight: bold;
         width: 100px;
         text-align: right;
         line-height: 42px;
      }

      .dd {
         flex: 1;
         display: flex;
         flex-wrap: wrap;

         > a {
            width: 132px;
            height: 42px;
            margin-left: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            border: 1px solid #e4e4e4;
            background: #f5f5f5;
            color: #999;
            text-align: center;
            line-height: 40px;

            &:hover {
               border-color: @xtxColor;
               background: lighten(@xtxColor, 50%);
               color: @xtxColor;
            }

            &.active {
               border-color: @xtxColor;
               background: @xtxColor;
               color: #fff;
            }
         }
      }
   }
}
</style>
